<template>
  <div class="whole-box flex_between">
    <!-- <EchartsGauge style="width: 400px;height: 400px;"></EchartsGauge> -->
    <transition name="left" appear>
      <div class="left">
        <ItemBox title="社区实时概况" style="height: 49.1%;" class="left-top">
          <span class="date" slot="select">{{date}}</span>
          <SubContentBox slot="content" title="社区实时概况" style="height: 40%;" class="left-top1">
            <div slot="content" class="flex">
              <EchartsPie :titleSize="18" class="pie-echarts" :label="item.title" :data="item.data" v-for="(item,index) in leftTop1"
                :key="index"></EchartsPie>
            </div>
          </SubContentBox>
          <SubContentBox slot="content" title="设备设施监测" class="left-top2" style="height: 60%;">
            <div slot="content">
              <div class="left-top2-item  fl" v-for="(item,index) in leftTop2" :key="index">
                <span class="flipper-span name">{{item.name}}</span>
                <Flipper :val="item.value"></Flipper>
                <span class="flipper-span">个</span>
                <div class="up" v-if="item.type=='up'"></div>
                <div class="down" v-else></div>
                <span class="flipper-number">{{item.rate}}</span>
              </div>

            </div>
          </SubContentBox>
        </ItemBox>
        <ItemBox title="商业实时概况" style="height: 49%;" class="left-bottom">
          <span class="date" slot="select">{{date}}</span>
          <div slot="content" class="flex_center left-bottom1">
            <EchartsPie class="pie-echarts" :label="item.title" :data="item.data" v-for="(item,index) in leftBottom1"
              :unit="item.unit" :titleSize="18" :key="index"></EchartsPie>
          </div>
          <div slot="content" class="left-bottom2">
            <Money :data="leftBottom2"></Money>
            <div class="lWrap fl">
              <TradeDetail :lines="2" style="padding: 0;" />
            </div>

          </div>

        </ItemBox>
      </div>
    </transition>
    <transition name="right" appear>
      <div class="right">
        <ItemBox title="交通实时概况" style="height: 49%;" class="right-top">
          <span class="date" slot="select">{{date}}</span>
          <SubContentBox slot="content" title="主干道分析" style="height: 54%;" class="right-top1">
            <div slot="content" class="flex">
              <div class="item" v-for="(item,index) in rightTop1" :key="index">
                <EchartsPercentage class="pie-echarts" :label="'拥堵'+item.rate+'%'" :data="item.rate">
                </EchartsPercentage>
                <p class="title">{{item.name}}</p>
                <p class="desc">平均<span class="text-blue bold"> {{item.number1}} </span>公里<span class="text-blue bold">
                    {{item.number2}} </span>万次
                </p>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox slot="content" title="公共交通" style="height: 45%;margin-top: 1%;" class="right-top2">
            <div slot="content" class="flex">
              <div class="left">
                <div class="item" v-for="(item,index) in rightTop2" :key="index">
                  <span class="flipper-span margin-right">{{item.name}}</span>
                  <FlipperBig :val="item.value" :length="item.length"></FlipperBig>
                  <span class="flipper-span margin-right">{{item.unit}}</span>
                </div>
              </div>
              <div class="right">
                <EchartsMoreLine :data="rightTop3" yUnit="万人" :color="['rgba(217, 117, 89,','rgba(228, 196, 119,']">
                </EchartsMoreLine>
              </div>
            </div>
          </SubContentBox>
        </ItemBox>
        <ItemBox title="文旅实时概况" style="height: 49%;" class="right-bottom"
          :backgroundImage="require('@/assets/images/licang/kuang/k6.png')">
          <span class="date" slot="select">{{date}}</span>
          <div slot="content" class="flex right-bottom1">
            <EchartsPie class="pie-echarts" :label="item.title" :data="item.data" v-for="(item,index) in rightBottom1"
              :key="index" :titleSize="18"></EchartsPie>
          </div>
          <div slot="content" class="right-bottom2">
            <Wenlv :data="rightBottom2"></Wenlv>

          </div>
          <!-- <HorizontalBar></HorizontalBar> -->
          <div slot="content" class="flex right-bottom3">
            <EchartsBar class="bar-echarts" unit="人" :data="rightBottom3" label="景区数量" yName="当日客源地分析"
              :nameTextStyle="[0, -40, 0, 0]"></EchartsBar>
          </div>
        </ItemBox>
      </div>
    </transition>
  </div>
</template>

<script>
  import Wenlv from '@/components/TradeDetail/wenlv'
  import Money from '@/components/TradeDetail/money'
  export default {
    name: 'Whole',
    components: {
      Money, Wenlv
    },
    data() {
      return {
        date: null,
        leftTop1: [
          {
            title: '文化程度',
            data: [
              { name: '初中', value: 11 },
              { name: '中专', value: 15 },
              { name: '大专', value: 12 },
              { name: '本科', value: 9 },
              { name: '博士', value: 3 },
              { name: '研究生', value: 2 },
              { name: '其他', value: 1 },
            ]
          },
          {
            title: '家庭人数',
            data: [
              { name: '1人', value: 12 },
              { name: '2人', value: 52 },
              { name: '3人', value: 9 },
              { name: '4人', value: 30 },
              { name: '5人', value: 44 },
              { name: '6人', value: 92 },
            ]
          },
          {
            title: '车辆',
            data: [
              { name: '机动车', value: 16000 },
              { name: '非机动车', value: 6000 }
            ]
          },
          {
            title: '社区执勤',
            data: [
              { name: '商超', value: 12 },
              { name: '网格员', value: 52 },
              { name: '街道办人员', value: 9 },
              { name: '巡查员', value: 51 },
            ]
          },
        ],
        leftTop2: [
          { name: '停车场', value: 112, rate: "89%", type: "up" },
          { name: '充电桩', value: 12091, rate: "87%", type: "up" },
          { name: '商超', value: 15600, rate: "92%", type: "up" },
          { name: '医院', value: 92, rate: "98%", type: "up" },
          { name: '公园', value: 10, rate: "99%", type: "down" },
          { name: '养老机构', value: 1200, rate: "98%", type: "down" },
          { name: '社区食堂', value: 135, rate: "90%", type: "up" },
          { name: '托儿所', value: 1250, rate: "98%", type: "down" },
          { name: '摄像头', value: 12560, rate: "98%", type: "down" },
          { name: '路灯', value: 27009, rate: "92%", type: "up" },
          { name: '垃圾桶', value: 1600, rate: "90%", type: "up" },
          { name: '指示牌', value: 1560, rate: "98%", type: "down" },
        ],
        leftBottom1: [
          {
            title: '门店数量',
            unit: '个',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 150 },
              { name: '教育', value: 160 },
              { name: '健康', value: 165 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 181 },
            ]
          },
          {
            title: '交易金额',
            unit: '万元',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 130 },
              { name: '教育', value: 150 },
              { name: '健康', value: 175 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 131 },
            ]
          },
          {
            title: '从业人员',
            unit: '人',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
        ],
        leftBottom2: [
          { name: '餐饮', value: 680.82, store: 234, type: "up", person: 4345, compare: 3 },
          { name: '娱乐', value: 111.73, store: 844, type: "down", person: 2342, compare: 2 },
          { name: '教育', value: 88.92, store: 198, type: "up", person: 1363, compare: 3 },
          { name: '健康', value: 41.06, store: 124, type: "up", person: 7543, compare: 3 },
          { name: '商城', value: 959.89, store: 12, type: "up", person: 2346, compare: 3 },
          { name: '酒店', value: 289.65, store: 23, type: "up", person: 1836, compare: 3 },
        ],
        rightTop1: [
          {
            name: '青银高速',
            rate: 16,
            number1: 36,
            number2: 22.76
          },
          {
            name: '黑龙江中路',
            rate: 33,
            number1: 35,
            number2: 20.58
          },
          {
            name: '重庆中路',
            rate: 27,
            number1: 39,
            number2: 25.7
          },
          {
            name: '环湾路',
            rate: 7,
            number1: 40,
            number2: 28.23
          },
          {
            name: '九水东路',
            rate: 25,
            number1: 35,
            number2: 18.54
          },
        ],
        rightTop2: [
          { length: 5, name: '地铁平均延时', value: 2.3, unit: "分钟" },
          { length: 5, name: '公交平均延时', value: 22.78, unit: "分钟" },
          { length: 4, name: '公交延时数量', value: 65, unit: "个" }
        ],
        rightTop3: {
          xData: ['1', '3', "4", "5", '6', '7', "9",],
          yData: [{ name: '公交人数量', data: [12, 15, 14, 13, 25, 23, 23] },
          { name: '地铁人数量', data: [54, 65, 67, 64, 45, 67, 67] }],
        },
        rightBottom1: [
          {
            title: '景区数量',
            unit: '个',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 150 },
              { name: '教育', value: 160 },
              { name: '健康', value: 165 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 181 },
            ]
          },
          {
            title: '交易金额',
            unit: '万元',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 130 },
              { name: '教育', value: 150 },
              { name: '健康', value: 175 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 131 },
            ]
          },
          {
            title: '来源分析',
            unit: '万元',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
          {
            title: '从业人员',
            unit: '人',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
        ],
        rightBottom2: [
          { name: '展馆园艺', value: 122453, rate: "89", type: "up", person: 23424 },
          { name: '动植物园', value: 235464, rate: "87", type: "down", person: 15326 },
          { name: '景区景点', value: 86435, rate: "92", type: "up", person: 12364 },
        ],
        rightBottom3: [
          { name: '北京', value: 342 },
          { name: '上海', value: 235 },
          { name: '深圳', value: 134 },
          { name: '南京', value: 347 },
          { name: '杭州', value: 236 },
          { name: '郑州', value: 123 },
          { name: '洛阳', value: 135 },
          { name: '邯郸', value: 235 },
          { name: '淄博', value: 432 },
          { name: '重庆', value: 247 },
          { name: '其他', value: 532 },
        ],
        timer: null
      };
    },
    created() {
      this.getDate()
      this.initInterval()
      this.initXData()
    },
    mounted() {
      this.$store.dispatch('focusMainDistrict')
      this.$store.dispatch('addConstantMarks', { type: 'all' })
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.$store.state.map.clearMap()
    },
    methods: {
      initXData() {
        this.rightTop3.xData = this.$getRecentWeekDates()
      },
      //获取当前日期
      getDate() {
        this.date = this.$moment().format('YYYY-MM-DD')
      },
      initInterval() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
          //商业实时概况
          for (let item of this.leftBottom2) {
            item.value = (Number(item.value) + Number(0.02)).toFixed(2)
          }
          for (let item of this.rightTop2) {
            if (item.name == '地铁平均延时') {
              item.value = (Math.round(Math.random() * 100) / 100).toFixed(2)
            }
            if (item.name == '公交平均延时') {
              item.value = (Math.round(Math.random() * 1000) / 100).toFixed(2)
            }
            if (item.name == '公交延时数量') {
              item.value = (Math.round(Math.random() * 60)).toFixed(0)
            }
          }
          for (let item of this.rightBottom2) {
            item.value = (Math.round(Math.random() * 99999)).toFixed(0)
          }
        }, 80000)
      },

    },
  };
</script>

<style lang="scss" scoped>
  .whole-box {
    width: 100%;
    height: 100%;

    .left,
    .right {
      pointer-events: fill;
      width: 24.5%;
      height: 100%;

      .date {
        font-size: 22px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.8)
      }

      @media (max-width: 2600px) {
        .date {
          font-size: 26px;
        }
      }

    }

    .left {
      .left-top {
        .left-top1 {
          .pie-echarts {
            width: 25%;
            height: 170px;
          }

          @media (max-width: 2600px) {
            .pie-echarts {
              height: 13vh;
            }
          }
        }

        .left-top2 {
          margin-top: 5px;

          .left-top2-item {
            display: flex;
            align-items: center;
            width: 50%;
            margin-top: 9px;

            /* padding-right: 15px; */
            .name {
              width: 82px;
            }

            .margin-right {
              margin-right: 15px;
            }

          }
        }
      }

      .left-bottom {
        .left-bottom1 {
          .pie-echarts {
            width: 33%;
            height: 170px;
          }
        }

        .left-bottom2 {
          margin-top: 5px;
          width: 100%;
          height: calc(100% - 260px);

        }
      }

    }

    .right {
      .right-top {
        .right-top1 {
          .flex {
            height: 100%;
            width: 100%;

            .item {
              width: 20%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              .pie-echarts {
                width: 100%;
                height: 140px;
              }

              .title {
                font-size: 20px;
                color: #ffffff;
                font-family: PingFang SC-Bold;
              }

              .desc {
                font-size: 19px;
                color: #ffffff;
                font-family: PingFang SC-Bold;
                padding: 0px 20px 0;
                text-align: center;
              }
            }
          }

        }

        .right-top2 {
          .flex {
            height: 100%;
            width: 100%;

            .left,
            .right {
              width: 57%;
              height: 100%;
            }

            .left {
              width: 43%;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .item {
                margin-top: 10px;
                display: flex;
                align-items: center;

                .margin-right {
                  margin-right: 10px;
                }
              }
            }
          }


        }
      }

      .right-bottom {
        .right-bottom1 {
          width: 100%;
          height: 30%;

          .pie-echarts {
            width: 25%;
            height: 170px;
          }
        }

        .right-bottom2 {
          width: 100%;
          height: 30%;
          flex-direction: column;
          padding: 1.5% 3% 0;



        }

        .right-bottom3 {
          width: 100%;
          height: 40%;
          margin-top: 1%;
        }
      }
    }

    .lWrap {
      width: 100%;
      padding-right: 20px;
      padding-left: 10px;
      padding-top: 10px;
    }

  }
</style>